<template>
  <div class="add">
         <!-- top -->
         <div class="top">
              <div class="flsex"><span> 工单编号:</span>
                <el-input v-model.trim="date.taskCode" clearable placeholder="请输入内容"></el-input>
              </div>
               <div class="flsex"><p> 工单状态: </p>
                    <el-select v-model="date.status" slot="prepend" clearable placeholder="请选择">
                      <el-option label="待办" value="1"></el-option>
                      <el-option label="进行" value="2"></el-option>
                      <el-option label="取消" value="3"></el-option>
                      <el-option label="完成" value="4"></el-option>
                    </el-select>
              </div>
              <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
         </div>

         <!-- 列表 -->
         <div class="box-card">
          <div class="top">
             <el-button class="Red" type="primary" icon="el-icon-circle-plus-outline">新增</el-button>
             <el-button class="Red1" type="warning" plain @click="Dlick">工单配置</el-button>
              <Configuration :centerDialog.sync='centerDialog'/>
          </div>

           <el-table
                    :data="TableData"
                    style="width: 100%">
                    <el-table-column
                      type="index"
                      label="序号"
                      width="80">
                    </el-table-column>
                    <el-table-column
                      prop="taskCode"
                      label="工单编号"
                      width="160">
                    </el-table-column>
                    <el-table-column
                      prop="innerCode"
                      label="设备编号"
                      width="160">
                    </el-table-column>
                      <el-table-column
                      prop="taskType.typeName"
                      label="工单类型"
                      width="160">
                    </el-table-column>
                     <el-table-column
                      prop='createType'
                      label="工单方式"
                      :formatter="hasBackFormat"
                       width="160">
                    </el-table-column>
                      <el-table-column
                      prop="taskStatusTypeEntity.statusName"
                      label="工单状态"
                       width="160">
                    </el-table-column>
                       <el-table-column
                      prop="userName"
                      label="运营人员"
                       width="160">
                    </el-table-column>
                      <el-table-column
                      prop="createTime"
                      label="创建日期"
                      :formatter="hasBack"
                       width="200">
                    </el-table-column>
                     <el-table-column
                      label="操作"
                      width="80">
                      <template #default="{row}">
                      <el-button type="text" @click="Dlick1(row.taskId)">修改详情</el-button>
                      </template>
                    </el-table-column>
           </el-table>
        </div>
        <!-- 修改详情 弹窗 -->
        <Popover :centerDialog.sync='centerDialog1' :name='name'>
            <template #before>
               <div>
                    <div class="C-top">
                       <img src="../../assets/cg.png" alt="" class="icon">
                         <span>成功</span>
                         <img src="https://likede2-admin.itheima.net/img/pic_4.3b5af41c.png" alt="" class="pic">
                    </div>
                    <!-- 详情 -->
                    <div class="details">
                          <div>设备编号：{{list.innerCode}}</div>
                          <div>创建日期：{{list.createTime}}</div>
                          <div>取消日期：{{list.updateTime}}</div>
                          <div>运营人员：{{list.userName}}</div>
                          <div>工单类型：{{list.taskType && list.taskType.typeName}}</div>
                          <div>补货数量： <el-link type="primary" :underline="false" @click="Replenishment">补货详情</el-link></div>
                          <div>工单方式：{{list.createType===1? '手动' : '自动'}}</div>
                          <div>取消原因：</div>
                    </div>
               </div>
            </template>
            <template #after>
                     <el-button type="warning" plain class="El-but">{{ButtonName}}</el-button>
            </template>
        </Popover>
        <!-- 补货详情 -->
        <Popover :centerDialog.sync='centerDialog2' :name='name'>
             <template #before>
                        <el-table
                          :data="Listdate"
                          border
                          style="width: 100%">
                          <el-table-column
                            prop="channelCode"
                            label="货到编号"
                            width="180">
                          </el-table-column>
                          <el-table-column
                            prop="skuName"
                            label="商品名称"
                            width="300">
                          </el-table-column>
                          <el-table-column
                            prop="expectCapacity"
                            label="补货数量">
                          </el-table-column>
                        </el-table>
            </template>
        </Popover>
        <div class="bottue">
          <!-- 数据 -->
            <div class="lets"><span>共{{tableData.totalCount}}条记录</span>
            <span>第{{tableData.pageIndex}}/{{tableData.totalPage}}页</span>
            </div>
          <!-- 按键 -->
           <div class="rings">
              <el-button :disabled="tableData.pageIndex === '1'  ? true : false" @click="add(-1)">上一页</el-button>
              <el-button :disabled="tableData.pageIndex === tableData.totalPage  ? true : false" @click="add(1)">下一页</el-button>
           </div>
        </div>
   </div>
</template>

<script>
import moment from 'moment'
import { orderSearch, getDetails, Replenishment } from '@/api/management'
import Configuration from '@/components/management/PleasePrompt/configuration.vue'
import Popover from '@/components/management/PleasePrompt/Popover.vue'
export default {
  name: 'DikticDkdBusiness',
  components: {
    Configuration,
    Popover
  },
  data () {
    return {
      date: {
        taskCode: '',
        status: ''
      },
      tableData: {},
      TableData: [],
      createType: '',
      isAll: false,
      isAll1: false,
      centerDialog: false,
      centerDialog1: false,
      centerDialog2: false,
      // 工单搜索
      form: {
        pageIndex: 1,
        pageSize: 10,
        isRepair: false
      },
      // 弹窗名称
      taskId: '',
      name: '工单详情',
      ButtonName: '重新创建',
      list: {},
      Listdate: []
    }
  },
  created () {
    this.orderSearch()
  },
  mounted () {

  },

  methods: {
    // 通过导航栏搜索数据
    async search () {
      const res = await orderSearch({ ...this.form, ...this.date })
      this.tableData = res
      this.TableData = res.currentPageRecords
      // console.log(res)
    },
    // 获取工单搜索
    async orderSearch () {
      const res = await orderSearch(this.form)
      this.tableData = res
      this.TableData = res.currentPageRecords
      // console.log(res)
    },
    // 工单处理
    hasBackFormat (row) {
      return row.createType === 1 ? '手动' : '自动'
    },
    // 日期处理
    hasBack (row) {
      return moment(row.createTime).format('YYYY-MM-DD HH:mm:ss')
    },
    // 按键处理
    add (val) {
      this.form.pageIndex = this.form.pageIndex + val
      this.orderSearch()
    },
    // 打开弹窗
    Dlick () {
      this.centerDialog = true
    },
    async Dlick1 (row) {
      this.name = '工单详情'
      this.centerDialog1 = true
      const res = await getDetails(row)
      this.list = res
      // console.log(this.list)
      this.taskId = row
    },
    //
    async  Replenishment () {
      try {
        this.name = '补货详情'
        this.centerDialog2 = true
        const res = await Replenishment(this.taskId)
        console.log(res)
        this.Listdate = res
      } catch (e) {
        console.log(e)
      }
    }

  }
}
</script>
// 插槽的
<style lang="scss" scoped>
 ::deep .el-dialog__body {
      display: none  !important;
       position: relative !important;
       height: 380px !important;
}
  .C-top{
     width: 100%;
     height: 54px;
     line-height: 54px;
     background-color: #f8f8f8 !important;
     display:flex;
     .icon{
          margin: 12px 22px;
          width: 30px;
          height: 30px;
     }
     .pic{
           position: relative;
           right: -370px;
           margin-top: -13px;
           width: 88px;
           height: 68px;
     }
  }
  .details{
    //  height: 300px;
     width: 100%;
     display: flex;
     flex-wrap: wrap;
     margin-top:20px;
     div{
       width: 46%;
       height: 36px;
       line-height: 36px;
       //background-color: #b4ff77;
       margin-left:20px ;
     }
  }
::v-deep .El-but{
     background-color: #fbf4f0 !important;
     &:hover{
         background-color: #ff6e2a !important;
       }
  }
 ::v-deep .el-dialog__footer{
    text-align: center;
}

</style>

<style lang="scss" scoped>
.cell{
.el-button{
   background-color: rgba(0,0,0,0);
   margin: 0;
}
}
  #add{
     width: 100%;
     height: 100%;
     background-color: #f8fafd;
     padding-right:20px ;
     padding-bottom:30px;
     box-sizing: border-box;
  }
 .top{
       height: 64px;
       line-height: 64px;
       padding-left:15px ;
       background-color: #fff;
       display: flex;
       .flsex{
         display: flex;
         padding-right:15px ;
         span{
           width: 100px;
         }
         p{
          padding-right:7px ;
         }
       }
 }
 .box-card{
       margin-top:20px ;
       padding: 20px;
       background-color: #fff;
       box-shadow: 0 0;
 }
.el-button{
  height: 36px;
  margin-top:15px;
  background-color: #5f84ff;
}
.Red{
  background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
  border: solid 0px rgba(0,0,0,0);
  margin-top:0 ;
}
.Red1{
  background-color: #fbf4f0!important;
  margin-top:0 ;

}
.bottue{
   height: 96px;
   padding: 32px 16px;
   margin-bottom:30px;
   background-color: #ffffff;
   display: flex;
   justify-content: space-between;
   span{
     margin-left:10px;
     color: #dbdfe5;
   }
   .el-button{
     margin-top:0 ;
     background-color: #d5ddf8;
     margin-left:30px;
   }
}
</style>
